<template>
  <div class="doc">
    <el-header height="60px" class="el-header ad-header sha1 clear-ed">
      <index-header></index-header>
    </el-header>

    <header
      class="doc_header"
      v-if="!!curDocData && !!curDocData.title">
      <h1 class="doc_header_title">{{curDocData.title}}</h1>
    </header>

    <article class="doc_article" :style="{minHeight: windowHeight + 'px'}">
      <aside
        v-show="bIsAsideLeftShow"
        class="doc_aside_left">
        <div :style="bIsAsideTop?{top:'0px',position:'fixed'}:{}">
          <a
            :title="item.title"
            href="javascript:;"
            :class="{'doc-menu-active': curDocData && curDocData.id == item.id}"
            :key="'doc_tab_' + index"
            v-for="(item, index) in docData"
            @click.stop="click2Doc(item)">
            {{item.title}}
          </a>
        </div>
      </aside>

      <main class="doc_main">
        <component
          v-if="!!curDocData && !curDocData.bIsDocNotExisted && !!curDocData.id"
          :is="'Doc' + curDocData.id"
          @onload.native="handleDocLoad"
          @getDoc="handleGetDoc">
        </component>
        <div v-if="!curDocData || curDocData.bIsDocNotExisted || !curDocData.id">
          <p style="font-size:14px;color:#262626;line-height:24px;text-align:left;text-indent:2em;">文档正在编辑中～</p>
        </div>
      </main>

      <aside
        v-show="bIsAsideRightShow"
        class="doc_aside_right">
        <div
          v-if="!!docSubmenuData && docSubmenuData.length > 0"
          :style="bIsAsideTop?{top:'0px',position:'fixed'}:{}">
          <a
            :title="item.subTitle"
            :href="'#doc_' + curDocData.id + '_' + item.subId"
            :class="{'doc-submenu-active': curSubmenuData && curSubmenuData.subId == item.subId}"
            :key="'doc_submenu_' + index"
            v-for="(item, index) in docSubmenuData"
            @click.stop="click2SubMenu(curDocData, item)">
            {{item.subTitle}}
          </a>
        </div>
      </aside>
    </article>

    <index-footer></index-footer>
  </div>
</template>

<script>
  import IndexHeader from '@/views/child/header/IndexHeader.vue'
  import IndexFooter from '@/views/child/IndexFooter.vue';
  import { docMixin, DocData } from '@/views/child/doc/data/doc';
  export default {
    mixins: [ docMixin ],  // document setting and data
    setup () {
      return {
        // doc data
        docData: DocData,
        docSubmenuData: null,
        curDocData: null,
        curSubmenuData: null,

        // windowHeight
        windowHeight: "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight,

        // scroll
        bIsAsideTop: false,

        // resize
        bIsAsideLeftShow: true,
        bIsAsideRightShow: true,
      }
    },
    components: {
      IndexHeader,
      IndexFooter,
    },
    mounted() {
      const that = this;

      // set default curDocData
      this.setDefaultCurDocData();

      // scroll
      window.addEventListener("scroll", function(e) {
        that.handleWindowScroll(e);
      }, false);

      // resize
      window.addEventListener("resize", function(e) {
        that.handleWindowResize(e);
      }, false);
    },
    methods: {
      setDefaultCurDocData() {
        // curDocData
        this.curDocData = this.docData && this.docData.length > 0 && this.docData[0] || null;
      },
      click2Doc(item) {
        const that = this;
        // this.curDocData = item;

        if(docMixin &&  docMixin.components && Object.keys(docMixin.components).indexOf("Doc" + item.id) > -1) {
          console.log("done: " + Object.keys(docMixin.components));
          that.curDocData = item;
        }
        else {
          console.log("not done: " + Object.keys(docMixin.components));
          that.curDocData = item;
          that.curDocData.bIsDocNotExisted = true;
        }
        // console.log(docMixin, this);

        // scrollTo top
        window.scrollTo({top: 0, behavior: 'smooth'});
      },
      click2SubMenu(parent, item) {
        // const that = this;
        this.curSubmenuData = item;
      },
      handleWindowScroll() {
        // const that = this;
        if(window.scrollY > 180) this.bIsAsideTop = true
        else this.bIsAsideTop = false
      },
      handleWindowResize() {
        // const that = this;
        // bIsAsideLeftShow
        if(window.innerWidth < 1200) this.bIsAsideLeftShow = false
        else this.bIsAsideLeftShow = true

        // bIsAsideRightShow
        if(window.innerWidth < 1000) this.bIsAsideRightShow = false
        else this.bIsAsideRightShow = true

        // resize
        this.windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
      },
      handleGetDoc(submenuData) {
        // const that = this;
        // console.log(submenuData);
        this.docSubmenuData = submenuData;
      },
      handleDocLoad() {
        const submenuElList = document.querySelectorAll('h2');
        console.log(submenuElList);
      },
    },
    beforeUnmount() {
      const that = this;

      // scroll
      window.removeEventListener("scroll", function(e) {
        that.handleWindowScroll(e);
      }, false);

      // resize
      window.removeEventListener("resize", function(e) {
        that.handleWindowResize(e);
      }, false);
    },
  }
</script>

<style lang="scss" scoped>
  .doc {
    h1 {
      text-align: center;
      font-size: 36px;
      line-height: 1.389;
      font-weight: 700;
      color: #262626;
      padding: 32px 0;
    }
  }

  .doc_header {
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, .1);

    .doc_header_title {
      flex: auto;
      max-width: 1000px;
    }
  }

  .doc_article {
    display: flex;

    // .doc_aside_left {
    //   display: flex;
    //   flex-direction: column;
    //   width: calc((100% - 1000px) / 2);
    //   min-width: 200px;
    // }

    .doc_main {
      flex: auto;
      padding: 16px 36px;

      >div[class^="doc"] {
        max-width: 1000px;
        margin-bottom: 96px;
      }
    }

    .doc_aside_left,
    .doc_aside_right {
      display: flex;
      width: calc((100% - 1200px) / 2);
      min-width: 200px;

      >div {
        display: flex;
        flex-direction: column;
        width: 200px;
        padding-top: 16px;

        >a {
          line-height: 18px;
          font-size: 12px;
          color: #595959;
          padding: 3px 10px 3px 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
        }

        .doc-menu-active {
          color: #007cfa;
        }

        .doc-submenu-active {
          color: #007cfa;
          border-left: 2px solid #007cfa;
        }
      }
    }

    .doc_aside_left {
      justify-content: flex-end;
      background-color: #fafafa;
    }

    .doc_aside_right {
      >div {
        >a {
          border-left: 2px solid #e8e8e8;
        }
      }
    }
  }
</style>
